<script setup lang="ts">
import { reactive } from 'vue';
import WorkOrderList from './components/work-order-list.vue';
import DeliverList from './components/deliver-list.vue';
const state: {
  currentTab: string;
} = reactive({
  currentTab: 'repair',
});

const components = {
  repair: WorkOrderList,
  deliver: DeliverList,
};
</script>

<template>
  <view class="my-work-order app-page--1">
    <app-navbar title="我的工单" />
    <nut-tabs v-model="state.currentTab">
      <nut-tab-pane title="维修工单" pane-key="repair" />
      <nut-tab-pane title="运送工单" pane-key="deliver" />
    </nut-tabs>
    <component :is="components[state.currentTab]" :key="'my-work-order-' + state.currentTab" />
  </view>
</template>

<style lang="scss">
.my-work-order {
  .nut-tabs {
    &__content {
      display: none;
    }
  }
}
</style>
